<template>
    <div class="cartItems">
        <div class="pro-title">
            <div class="pro-inp" id="allInp">
                <input type="checkbox" class="check-inp">
                <i class="iconfont icon icons1" 
                @click="checkAll"
                :class="{checkActive:isActive,iconCicleo:!isActive}"
                ></i>
            </div>
            <i class="lyf-icons homeIcon"></i>
            <span class="title">来伊份</span>
        </div>
        <ul class="cartList">
            <li class="cartItem"
             v-for="(good,index) in goods"
              :key="index">
                <div class="pro-inp" id="itemInp">
                    <input type="checkbox " class="check-inp">                
                    <i class="iconfont  icon icons1"
                     @click="checkItem(good)"
                    :class="{checkActive:good.check,iconCicleo:!good.check}"></i>
                </div>                
                <div class="pro-img">
                    <img class="cart-img" :src="good.srcImgUrl"></img>            
                </div>
                <div class="pro-info">
                    <h4 class="pro-name ui-ellipsis">{{good.mpName}}</h4>
                    <p class="pro-space ui-ellipsis"></p>
                    <ul class="pro-all">
                        <li class="pro-space">
                            <span class="price">￥{{good.salePrice}}</span>
                        </li>
                        <li class="count">
                            <button class="reduce" @click="reduce(good)">
                                <i class="icons1"
                                 :class="{'icons1-sub-disabled':good.count==1,'icons1-sub':good.count>1}"></i>
                            </button>
                            <span class="amount" >{{good.count}}</span>
                            <button class="add" @click="add(good)">
                                <i class="icons1"></i>
                            </button>
                        </li>
                    </ul>
                </div>
            </li>    
        </ul>
        <div class="totalItem" v-show="totalShow">
            <div class="checkboxs">
                <i class="iconfont icon icons1" 
                @click="checkAll"
                :class="{checkActive:isActive,iconCicleo:!isActive}"
                ></i>
                <input type="checkbox">全选
            </div>
            <div class="total-center">
                 <div class="price">
                    <span class="addUp">合计：￥{{money}}</span>
                 </div>
                 <div class="total">
                    <span class="fav ui-ellipsis">已优惠：￥0.00，不含运费</span>
                 </div>   
            </div>
            <div class="toAccount">
                <div class="toGo">去结算({{count}})</div>
            </div>
        </div>
        <div class="totalItem" v-show="!totalShow">
            <div class="checkboxs">
                <i class="iconfont icon icons1" 
                @click="checkAll"
                :class="{checkActive:isActive,iconCicleo:!isActive}"
                ></i>
                <input type="checkout">全选
            </div>
            <div class="edit">
                    <button class="remove" @click="delItem">删除</button>
                    <button class="toGo">移入收藏夹</button>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            totalShow: true
        }
    },
    computed:{
         goods(){
             console.log(3,this.$store.state.cartItems)
             return this.$store.state.cartItems;
         },
        isActive() {
            return this.$store.state.checkAll;
        },
        count() {
            return this.$store.getters.getCartCount;
        },
        money() {
            return this.$store.getters.getMoney;
        }  
    },
    methods:{
        checkItem(good){
           this.$store.commit("checkItem",good)
        },
        checkAll(){
            this.$store.commit("checkAll")
        },
        delItem() {
            this.$store.commit('delItem')
        },
        add(item) {
            this.$store.commit('add',item)
        },
        reduce(item) {
           this.$store.commit('reduce',item) 
        }
    },
    created() {
        cartBus.$on('edit',data => {
            this.totalShow = data=='编辑'? true:false;
        })
    }
}
</script>
<style lang="less" scoped>
.edit{
    position:absolute;
    top:0;
    right:0;
    left:.69rem;
    height:100%;
    text-align:right;
    background-color:#333;
    z-index:10;
    button{
        display:inline-block;
        min-width:.9rem;
        border:0;
        height:100%;
        padding:0;
        float:right;
        color:#fff;
    }
    .toGo{
        background-color:#ff7c20;
    }
    .remove{
        background-color:#666;
    }
}
.totalItem{
    position:fixed;
    left:0;
    right:0;
    bottom:.49rem;
    height:.49rem;
    padding-left:.72rem;
    padding-right:1.25rem;
    font-size:.12rem;
    background-color:#333;
    overflow:hidden;
    color:#fff;
    z-index:99;
    .checkboxs{
        position:absolute;
        top:.13rem;
        left:0.2rem;
    }
    .checkboxs i{
        position:absolute;
        top:0rem;
        left:-0.05rem;
        height:.24rem;
        width:.18rem;
    }
    .checkboxs input{
        position:relative;
        width:.2rem;
        height:.01rem;
        border:0;
        vertical-align:middle;
        top:0.1rem ;
        left:-.55rem;
    }  
}
.toAccount .toGo{
    position:absolute;
    top:0;
    right:0;
    width:1.25rem;
    height:.49rem;
    font-size:.18rem;
    line-height:.49rem;
    text-align:center;
}
.total-center{
    text-align:right;
    padding-top:.05rem;
    padding-right:.1rem;
    .price .addUp{
        font-size:.15rem;
    }
}
.checkActive{
background-position:-.35rem -0.51rem;
}
.iconCicleo{
background-position:-.69rem -0.51rem;    
}
#allInp .icons1{
    left:.15rem;
    top:.12rem;
}
.cartList{
    background-color:#fff;
}
.cartItems{
    padding-top:0.1px;
    margin-top:.44rem;
}
.pro-title{
    line-height:.42rem;
    height:.42rem;
    background:#fafafa;
    margin-top:.1rem;
    
    .homeIcon{
        width:.18rem;
        height:.18rem;
        background-position:0 -4rem;
        margin-left:.05rem;
    }
    .title{
        font-size:.14rem;
    }
    
}
.pro-inp{
    position:relative;
    float:left;
    padding-left:.15rem;
    .check-inp{
        position:relative;
        width:.2rem;
        height:.01rem;
        border:0;
        vertical-align:middle;
        top:0 ;
        left:0;
    }
    i{
        position:absolute;
        top:0.02rem;
        left:0.16rem;
        height:.24rem;
        width:.18rem;
    }
    .icon{
        position:absolute;
    }
}
.cartItem{
    position:relative;
    padding-left:0;
    padding-right:.15rem;
    margin-left:.15rem;
    .pro-inp{
        margin-top:.4rem;
        padding-left:0;
        margin-right:.08rem;
    }
}
.pro-inp .icon{
    left:.02rem;
    top:.08rem;
}
.pro-img{
    width:.82rem;
    height:.82rem;
    float:left;
    margin:.1rem .1rem .1rem 0;
    .cart-img{
        width:.81rem;
        height:.81rem;
        display:block;
        border:.01rem solid #ddd;
    }
}
.pro-info{
    height:.82rem;
    margin-left:1.2rem;
    padding: 0.1rem 0;
    .pro-name{
        height:.21rem;
    }
    .pro-space{
        height:.21rem;
    }
}
.pro-all{
    height:.3rem;
    margin-top:.06rem;
    overflow:hidden;
    .pro-space{
        float:left;
        width:50%;
        height:.2rem;
        padding-top:.1rem;
        line-height:.2rem;
        font-size:.16rem;
        color:#ff6900;
    }
    .count{
        float:left;
        width:45%; 
        position:relative;
        height:.28rem;
        border:.01rem solid #ddd;
        border-radius:.03rem;
    }
}
.count button{
    border:0;
    width:.33rem;
    text-align:center;
    height:100%;
    color:#ddd;
    background:#fff;
    border-right:.01rem solid #ddd;
    position:absolute;
    top:0;
}
.count .add{
    border-left:.01rem solid #ddd;
    border-right:0;
    right:0;
    i{
     background-position:-2.35rem -3.55rem;       
    }
}
.count i{
    width:.28rem;
    height:.28rem;
}
.count .amount{
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    line-height:.3rem;
}
</style>